<template>
  <div>
      <div class="d-flex a-center">
         <div>
             <label>年度</label>
             <el-date-picker
                     clearable
                     v-model="form.year"
                     type="year"
                     size="large"
                     class="m-l10"
                     value-format="YYYY"
                     placeholder="请选择"
             />
         </div>
          <el-button class="m-l10 button_view m-r10" @click="onQuery">查询</el-button>
          <el-button class="m-l10 button_reset" @click="onReset">重置</el-button>
          <el-button @click="visible=true">
              添加
              <svg-icon icon-class="add-icon-1"  class="m-l10"/>
          </el-button>
          <el-button @click="del">
              删除
              <svg-icon icon-class="delete-icon" class="m-l10"/>
          </el-button>
      </div>
      <public-table
              class="m-t20"
              :header-cell-style="{'background':'#F5F5F5'}"
              border
              :is-paging="false"
              :page="page"
              selection
              @handleSelectionChange="handleSelectionChange"
              :tableData="tableData"
              :tableOption.sync="tableOption"
      >
          <template #fileList="scope">
              <template v-for="(item,index) in scope.row.fileList" :key="index">
                  <span @click="download(item)" class="fileName">{{item.fileName}}</span>
                  <span v-if="(scope.row.fileList.length-1)!==index">,</span>
              </template>
          </template>
      </public-table>
  </div>

  <add-popup
          v-if="visible"
          ref="addPopupRef"
          v-model:visible="visible"
          title="添加"
          width="30%"
          confirm-button-title="确认"
          @onConfirm="onConfirm"/>
</template>

<script setup>
import {ElDatePicker, ElMessage, ElMessageBox} from "element-plus";
import {onMounted, reactive, ref} from "vue";
import SvgIcon from "@/components/SvgIcon/index.vue";
import PublicTable from "@/components/PublicTable.vue";
import {newInvestApi} from "@/api/investment";
import {useRoute} from "vue-router";
import {downloadFile, getURLhandler} from "@/common/utils/GlobalUtils";
import AddPopup from "./components/addPopup.vue";

const visible = ref(false);
const route = useRoute();

const form = reactive({
    year:''
});

const page = reactive({
    total: 0,
    current: 1,
    size: 50,
});

const tableOption = ref([
    { label: "年度 ", prop: "year" },
    { label: "附件 ", prop: "fileList",slot:true },
]);
const tableData = ref([]);

const getInvestBudgetFile = (params) => {
    newInvestApi.getInvestBudgetFile(params).then(res=>{
        tableData.value = res.data;
    });
}

/**
 * 下载附件
 * @param item
 */
const download = (item) => {
    downloadFile(item.fileAddress,item.fileName);
}

const ids = ref([]);

/**
 *
 * @param e
 */
const handleSelectionChange = (e) => {
    if(!e){return}
    ids.value = e.map(item=>{return item.id});

}

const del = () => {
    if(!ids.value.length){
        return ElMessage.warning('请选择需要删除的数据行!');
    }
    ElMessageBox.confirm(
        '确认删除吗?',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then((value) => {
          if(value==='confirm'){
              newInvestApi.delInvestBudgetFile({projectId:getURLhandler(route.path).projectId,ids:ids.value}).then(res=>{
                if(res.code==='200'){
                    ElMessage.success('删除成功！');
                    getInvestBudgetFile({projectId:getURLhandler(route.path).projectId});
                }
              });
          }
        })
}

const addPopupRef = ref(null);

/**
 * 确认
 */
const onConfirm = () => {
    console.log('addPopupRef.value',addPopupRef.value)
    addPopupRef.value.validate((valid, fields) => {
        if (valid) {
            let params = {
                ...addPopupRef.value.form,
                projectId:getURLhandler(route.path).projectId
            }
            newInvestApi.uploadBudget(params).then(res=>{
                visible.value = false;
                if(res.code==='200'){
                    ElMessage.success('添加成功！');
                    getInvestBudgetFile({projectId:getURLhandler(route.path).projectId});
                }
            });
        } else {
            console.log('error submit!', fields)
        }
    })
}

/**
 * 查询
 */
const onQuery = () => {
    getInvestBudgetFile({projectId:getURLhandler(route.path).projectId,year:form.year || ''});
}

/**
 * 重置
 */
const onReset = () => {
    form.year = '';
    getInvestBudgetFile({projectId:getURLhandler(route.path).projectId,year:form.year || ''});
}

onMounted(()=>{
    getInvestBudgetFile({projectId:getURLhandler(route.path).projectId});
});
</script>

<style lang="scss" scoped>
.fileName:hover{
  color: #fc702b;
  cursor: pointer;
}
</style>
